{# Heredando la plantilla principal #}

{% extends 'default.html' %}
{% use 'navegacion.html' %}
{% use 'loginUsuario.html' %}

{% block contenidos %}
<section style="margin-top:50px">
	<div class="hero-unit">
		<h1>Pagar DDJJ</h1>
	</div>

	<section class="row-fluid">   
		<div class="well well-small">
			{% if ddjjsindocu|length > 0 %}
				<section class="row-fluid">   
					<div class="well well-small">
						<h2 align="center">Seleccionar Instrumento de Pago</h2>		
						<fieldset id="botonera" style="text-align:center;">
						<button class="btn btn-primary btn-info" type="button" id="botonBoleta">Boleta de Deposito</button>
						<!--<button class="btn btn-primary btn-info" type="button" id="botonTransferencia">Transferencia Bancaria</button>-->
						</fieldset>
					</div>
				</section>
				<form id="cuerpoDDJJ" name="cuerpoDDJJ" class="hide" method="post" action="confirmarPago.php">
					<table id="ddjjsindocu" class="table">
					  <thead>
						<tr>
						  <th><div align="center">A&ntilde;o</div></th>
						  <th><div align="center">Mes</div></th>
						  <th><div align="center">Total</div></th>
						  <th><div align="center">Seleccionar</div></th>
						</tr>
					  </thead>
					   <tbody>
						{% for ddjjsdocu in ddjjsindocu %}
							<tr>
							  <td><div align="center">{{ ddjjsdocu.perano }}</div></td>
							  <td><div align="center">{{ ddjjsdocu.permes }}</div></td>
							  <td><div align="center">{{ ddjjsdocu.totapo }}</div></td>
							  <td><div align="center">
							    <input id="cP{{ddjjsdocu.control}}" name="checkPago[]" type="checkbox" value="{{ddjjsdocu.control}}"/>
							    <input id="rP{{ddjjsdocu.control}}" name="radioPago[]" type="radio" value="{{ddjjsdocu.control}}"/>
							    </div></td>
							</tr>
						{% endfor %}
					   </tbody>	
					</table>
					<legend></legend>
					<p><button id="confirmarPago" name="confirmarPago" type="submit" class="btn btn-primary">Confirmar Pago</button>
					   <input id="tipoPago" name="tipoPago" type="text" value="" class="span1 hide"/>
			      <div id="cartelError"class="alert alert-error hide"><strong>ERROR!  </strong><span id="txtMensaje"></span></div>
					   </p>
				</form>
			{% else %}
				<legend><h2 align="center">No hay Declaraciones Juradas pendientes de pago</h2></legend>
			{% endif %}	
		</div>
	</section>
</section>
{% endblock %}
{% block javaScripts %}
<script type="text/javascript">
	$(function(){
		$('body').on('click','#botonBoleta',function() {
			$('#cuerpoDDJJ').removeClass('hide');
			$('#cuerpoDDJJ')[0].reset();
			$('#tipoPago').val("B");
			{% for ddjjsdocu in ddjjsindocu %}
				$('#cP{{ddjjsdocu.control}}').addClass('hide');
				$('#rP{{ddjjsdocu.control}}').removeClass('hide');
				$('#cartelError').addClass('hide');
			{% endfor %}
		});

		$('body').on('click','#botonTransferencia',function() {
			$('#cuerpoDDJJ').removeClass('hide');
			$('#cuerpoDDJJ')[0].reset();
			$('#tipoPago').val("T");
			{% for ddjjsdocu in ddjjsindocu %}
				$('#rP{{ddjjsdocu.control}}').addClass('hide');
				$('#cP{{ddjjsdocu.control}}').removeClass('hide');
				$('#cartelError').addClass('hide');
			{% endfor %}
		});

		$('body').on('click','#confirmarPago',function(elemento) {
			var tipopago = $('#tipoPago').val();
			if(tipopago=="B") {
				var arrRadio = $.map($('input:radio:checked'), function(e, i) {
    			    return +e.value;
				});
				if(arrRadio.length==0) {
					elemento.preventDefault();
					var mensaje = 'Ha optado por pagar con Boleta de Dep&oacute;sito. Obligatoriamente debe seleccionar una DDJJ.';
					$('#txtMensaje').html(mensaje);
					$('#cartelError').removeClass('hide');
				}
			} else {
				var arrCheck = $.map($('input:checkbox:checked'), function(e, i) {
    			    return +e.value;
				});
				if(arrCheck.length==0) {
					elemento.preventDefault();
					var mensaje = 'Ha optado por pagar via Transferencia Bancaria. Debe seleccionar como m&iacute;nimo una DDJJ.';
					$('#txtMensaje').html(mensaje);
					$('#cartelError').removeClass('hide');
				}
			}
		});
	});
</script>
{% endblock %}